<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="./css/page.css" />
    <title>云顶书院</title>
  </head>
  <body>
    <div class="logo">
      <img
        src="https://chibaoshaitaiyang-1316184616.cos.ap-beijing.myqcloud.com/%E7%99%BD%E8%89%B2%E9%80%8F%E6%98%8E%20%281%29.png"
        alt=""
      />
    </div>
    <div class="rubric">
      <span>欢迎使用</span>
      <h1>云顶研学系统</h1>
    </div>
    <div class="register">
      <h1 class="title">欢迎注册</h1>
      <div class="operation">
        <div>
          <input type="text" placeholder="学号" id="user_id" />
        </div>
        <div>
          <input type="text" placeholder="邀请码" id="invitation_code" />
        </div>
        <div>
          <input type="text" placeholder="姓名" id="user_name" />
        </div>
        <div>
          <input type="text" placeholder="方向" id="direction" />
        </div>
        <div>
          <input type="text" placeholder="期数" id="phase_num" />
        </div>
        <div>
          <input type="text" placeholder="密码" id="password" />
          <p class="tips">密码要求8-16位</p>
        </div>
        <div>
          <input type="text" placeholder="确认密码" id="password_confirm" />
          <p class="tips">要求与密码一致</p>
        </div>
        <button class="submit">立即注册</button>
      </div>
    </div>
    <script>
      var user_id = document.querySelector("#user_id");
      var invitation_code = document.querySelector("#invitation_code");
      var user_name = document.querySelector("#user_name");
      var direction = document.querySelector("#direction");
      var phase_num = document.querySelector("#phase_num");
      var password = document.querySelector("#password");
      var password_confirm = document.querySelector("#password_confirm");

      var submit = document.querySelector(".submit");

      var data = {
        // 学号
        user_id: user_id.value,
        // 邀请码
        invitation_code: invitation_code.value,
        // 姓名
        user_name: user_name.value,
        // 方向
        direction: direction.value,
        // 期数
        phase_num: phase_num.value,
        // 密码
        password: "",
        // 确认密码
        password_confirm: "",
      };
      password.onfocus = function () {
        password.parentNode.querySelector(".tips").className = "tips";
        password.parentNode.querySelector(".tips").innerHTML = "密码要求8-16位";
        password.parentNode.querySelector(".tips").style.display = "block";
      };
      password.onblur = function () {
        if (password.value.length == 0) {
          password.parentNode.querySelector(".tips").style.display = "none";
        }
      };
      password_confirm.onfocus = function () {
        password_confirm.parentNode.querySelector(".tips").className = "tips";
        password_confirm.parentNode.querySelector(".tips").innerHTML =
          "要求与密码一致";
        password_confirm.parentNode.querySelector(".tips").style.display =
          "block";
      };
      password_confirm.onblur = function () {
        if (password_confirm.value.length == 0) {
          password_confirm.parentNode.querySelector(".tips").style.display =
            "none";
        }
      };

      password.oninput = function () {
        if (password.value.length >= 8 && password.value.length <= 16) {
          password.parentNode.querySelector(".tips").className += " adopt";
          password.parentNode.querySelector(".tips").innerHTML = "正确";
          data.password = password.value;
        } else {
          password.parentNode.querySelector(".tips").className = "tips";
          password.parentNode.querySelector(".tips").innerHTML =
            "密码要求8-16位";
          data.password = "";
        }
      };
      password_confirm.oninput = function () {
        if (password_confirm.value === password.value && data.password != "") {
          password_confirm.parentNode.querySelector(".tips").className +=
            " adopt";
          password_confirm.parentNode.querySelector(".tips").innerHTML = "正确";
          data.password_confirm = password_confirm.value;
        } else {
          password_confirm.parentNode.querySelector(".tips").className = "tips";
          password_confirm.parentNode.querySelector(".tips").innerHTML =
            "要求在密码正确情况下一致";
          data.password_confirm = "";
        }
      };

      //   立即注册
      submit.onclick = function () {
        console.log("data", data);

        if (!data.password || !data.password_confirm) {
          alert("请检查后再次注册！");
          return;
        }

        axios({
          url: "http://m7u12i6p.shenzhuo.vip:47038/register/",
          method: "POST",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          data: {
            user_id: data.user_id,
            invitation_code: data.invitation_codeQ,
            user_name: data.user_name,
            direction: data.direction,
            phase_num: data.phase_num,
            password: data.password,
          },
        })
          .then(function (response) {
            alert("立即注册成功");
            console.log(response);
          })
          .catch(function (error) {
            alert("立即注册失败");
            console.log(error);
          });
      };
    </script>
  </body>
</html>
